<template>
  <transition name="slide">
    <div class="page-child page-test">
      <BackButton></BackButton>
      <div class="msg">该示例依赖于vue-router-module组件</div>
      <div class="msg">msg:{{ msg }}</div>
      <div class="msg">counter:{{ counter }}</div>
      <div class="buttons">
        <button class="btn" @click="testShow">测试 $router.show</button>
        <button class="btn" @click="testShowChild">测试 $router.showChild</button>
      </div>

      <router-view></router-view>
    </div>
  </transition>
</template>
<script>
export default {
  data() {
    return {
      msg: 'no message!',
      counter: 0
    }
  },
  methods: {
    back() {
      this.$router.back()
    },
    testShowChild() {
      this.$router.showChild(
        {
          name: 'childPage01', // router relative name
          params: {
            counter: this.counter
          }
        },
        res => {
          res && Object.assign(this, res)
          this.$toast.center('return ok!')
        },
        res => {
          res && Object.assign(this, res)
          this.$toast.center('callback ok!')
        }
      )
    },
    testShow() {
      this.$router.show(
        {
          name: 'home.testShowChild.childPage01', // router fullname
          params: {
            counter: this.counter
          }
        },
        res => {
          res && Object.assign(this, res)
          this.$toast.center('return ok!')
        },
        res => {
          res && Object.assign(this, res)
          this.$toast.center('callback ok!')
        }
      )
    }
  }
}
</script>
<style scoped>
.page-test {
  margin: 10px;
}

.btn {
  height: 40px;
}

.msg {
  font-size: 18px;
  display: flex;
  align-items: center;
  height: 50px;
}

.buttons {
  display: flex;
  flex-flow: column;
}

.buttons > button + button {
  margin-top: 10px;
}
</style>
